<template>
    <div class="collection">
        <div class="wrapper">
        <!-- 头部 star  -->
        <div class="header">
            <div class="header_left">
                <router-link tag="a" to="/my"><img :src="require('../assets/img/bar_icon_back_black.png')" alt=""></router-link>
            </div>
            <div class="header_center">
                下载
            </div>
            <div class="header_right">
               
            </div>
        </div>
        <!-- 头部 end   -->

        <!-- 主体部分 star  -->
         <div class="main" v-if="(downList.length>0)">
            <ul>
                <li v-for="item in downList" :key="item.id" @click="listId(null,item[0].id)">
                    <a>
                        <div class="img">
                            <img :src="item[0].img" alt="">
                            <div class="vip"></div>
                        </div>
                        <div class="word">
                            <p>{{item[0].name}}</p>
                            <div class="tip">
                                <p>经典...</p>
                                <p>175555次</p>
                            </div>
                        </div>
                    </a>
                    <div class="del" @click="downdel(item[0].id)">
                        <img :src="require('../assets/img/oioio.webp')" alt="">
                    </div>
                </li>
                
            </ul>
        </div>
        <!-- 主体部分 end  -->

        <!-- 没有内容 star -->
        <div class="null" v-if="!(downList.length>0)">
            <img :src="require('../assets/img/iv_mei_neirong.png')" alt="">
            <p>暂无记录哦~</p>
        </div>
        <!-- 没有内容 end -->
    </div>
    </div>
</template>

<script>
import {getJsonData} from "../api/home.js"
    export default {
        props:["dList"],
        data(){
            return {
                rou:null,
                allLists:[],//接受所有的故事
                downids:JSON.parse(localStorage.getItem("downList"))|| [],//接受localStorage里的下载id
                downList:[],//下载列表
            }
        },
        methods:{
            downdel(id){
                let index=this.downids.findIndex(item=>item==id)
                console.log(index);
                this.downids.splice(index,1)
                console.log(this.downids);
                window.localStorage.setItem("downList",JSON.stringify(this.downids));
                this.downList.splice(index,1)
                this.$emit('downdel', id);
            },
             listId(id,listenId){
                this.$emit("list-id",[id,listenId])
            },
        },
       
        created(){
            getJsonData().then(data=>{
                this.allLists=data.allLists
                this.downids=JSON.parse(localStorage.getItem("downList"))
                console.log(this.downids);
                    for(var j=0;j<this.downids.length;j++){
                            let arr=this.allLists.filter(item=>item.id==this.downids[j])
                            this.downList.push(arr)
                    }
                console.log(this.downList);
            })
        },
    }
</script>

<style lang="scss" scoped>
.collection{
    background-color: #f4f4f4;
    height: 100%;
    .wrapper{
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
    /* padding-bottom: 60px; */
    .null{
        text-align: center;
        transform: translateY(100%);
        img{
            width: 150px;
            
        }
        p{
            margin-top: 20px;
            font-size: 26px;
            color: #555555;
        }
    }
}
.header{
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 16px;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 1;
}
.header_left img{
    height: 20px;
    display: block;
}
.header_center{
    font-size: 18px;
    font-weight: 500;
}
.header_right a{
    color: #3e3e3e;
    font-size: 17px;
    font-weight: 600;
}
.main{
    padding: 0 16px;
}
/* .main ul{} */
.main ul li{
    padding: 7px 0;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main ul li a{
    display: flex;
    flex: 1;
}
.main ul li .img{
    position: relative;
}
.main ul li .img img{
    height: 96px;
    border-radius: 8px;
    display: block;
}
.main ul li .word{
    color: #141414;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.main ul li .word>p{
    height: 44px;
    line-height: 44px;
}
.main ul li .word .tip{
    font-size: 12px;
    display: flex;
    color: #999;
}
.main ul li .tip p:nth-child(1){
    padding:0 8px 0 16px;
    background: url(../assets/img/xiao.png) left center no-repeat; 
    background-size: 13px;
}
.main ul li .tip p:nth-child(2){
    padding-left: 16px;
    background: url(../assets/img/ic_listen_gray.webp) left center no-repeat; 
    background-size: 13px;
}
.main ul li .del img{
    display: block;
    width: 20px;
}
}
</style>